<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 14:16:45
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-30 10:20:50
 * @Descripttion: 
-->
<template>
  <div style="width: 100%">
    <fks-tabs
      v-model="fileServerClient"
      tab-position="left"
      type="border-card"
      style="height: 500px"
      :before-leave="beforeLeave"
      @tab-click="clientChoose"
    >
      <fks-tab-pane
        v-for="(item, index) in fileServerConfig.client"
        :key="index"
        :label="clientName[index]"
        :name="index"
      >
        <fks-button
          v-permission:1="['file:add']"
          class="fileButton"
          style="margin-left: 10px"
          icon="fks-icon-plus"
          type="primary"
          @click="addFileItem(index)"
        >
          {{ LANG.ADD }}
        </fks-button>
        <fks-button
          v-permission:1="['server:client:delete']"
          class="fileButton"
          icon="fks-icon-delete"
          @click="deleteType(index)"
        >
          {{ LANG.DELETE }}
        </fks-button>

        <fks-table :data="item" tooltip-effect="dark">
          <fks-table-column
            type="index"
            label="#"
            align="center"
            min-width="50px"
          />
          <fks-table-column
            :label="LANG.SERVER_ADDRESS"
            prop="endpoint"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.ACCOUNT"
            align="left"
            min-width="120"
            header-align="center"
            prop="accessKey"
          />
          <fks-table-column
            :label="LANG.BUCKET_NAME"
            align="left"
            header-align="center"
            prop="bucketName"
          />
          <fks-table-column :label="LANG.SERVER_TYPE" prop="ossType" />

          <fks-table-column :label="LANG.STATE" prop="state">
            <template slot-scope="scope">
              <fks-tag v-if="scope.row.state" type="success">
                {{ LANG.ON }}
              </fks-tag>
              <fks-tag v-if="!scope.row.state" effect="plain" type="info">
                {{ LANG.OFF }}
              </fks-tag>
            </template>
          </fks-table-column>
          <fks-table-column
            :label="LANG.OPERATION"
            width="200px"
            align="center"
          >
            <span slot-scope="scope">
              <fks-button
                v-if="!scope.row.state"
                v-permission:1="['file:on']"
                type="text"
                @click="fileOn(scope.$index)"
                >{{ LANG.ENABLE }}</fks-button
              >
              <fks-button
                v-if="scope.row.state"
                v-permission:1="['file:off']"
                type="text"
                @click="fileOff(scope.$index)"
                >{{ LANG.DISABLE }}</fks-button
              >
              <fks-button
                v-permission:1="['file:edit']"
                type="text"
                @click="editItem(scope.$index, index)"
                >{{ LANG.EDIT }}</fks-button
              >
              <fks-button
                v-permission:1="['file:delete']"
                danger-text
                @click="deleteItem(scope.$index, index)"
                >{{ LANG.DELETE }}</fks-button
              >
            </span>
          </fks-table-column>
        </fks-table>
      </fks-tab-pane>
      <fks-tab-pane
        key="addButton"
        v-permission:1="['server:client:add']"
        name="addButton"
      >
        <span slot="label"
          ><i
            class="fks-icon-circle-plus-outline"
            style="margin-right: 4px"
          />{{ LANG.ADD }}</span
        >
      </fks-tab-pane>
    </fks-tabs>
    <add-file-config
      :show-dialog="showDialog"
      :submit-type="submitType"
      :config="addFileConfig"
      :file-state="newFileState"
      :all-client-id="allClientId"
      :client="fileServerConfig.client"
      :client-name="clientName"
      @close="close"
      @submit="submit(arguments)"
    />
  </div>
</template>

<script>
import { getServerConfig, getClient, setServerConfig } from '../../api'
import AddFileConfig from './AddFileConfig.vue'

export default {
  name: 'FileServer',
  components: { AddFileConfig },
  data() {
    return {
      fileServerClient: '', //当前选择的应用配置
      clientName: {}, //应用信息
      fileServerConfig: {},
      allClientId: [], //全部应用的id
      clientId: [], //全部-现在
      submitType: false, //false修改 true新增，
      showDialog: false,
      fileType: '',
      fileIndex: 0,
      addFileConfig: {
        endpoint: '',
        accessKey: '',
        ossType: '',
        secretKey: '',
        bucketName: ''
      },
      newFileState: false //是否是需要新增
    }
  },
  mounted() {
    //获取应用信息
    getClient()
      .then((res) => {
        for (var a in res.data) {
          let type = res.data[a].clientId
          this.clientName[type] = res.data[a].clientName
          if (!(this.allClientId.indexOf(type) > -1)) {
            this.allClientId.push(type)
          }
        }
      })
      .catch()
    getServerConfig()
      .then((res) => {
        this.fileServerConfig = res.data.fileServerConfig
        this.initData = Object.assign({}, res.data)
        if (res.data.fileServerConfig.client) {
          for (var a in this.fileServerConfig.client) {
            this.fileServerClient = a
            break
          }
        }
      })
      .catch()
  },
  methods: {
    submit(e) {
      if (this.newFileState) {
        this.fileServerConfig.client[e[1]] = []
        this.clientId.splice(this.clientId.indexOf(e[1]), 1)
        this.fileServerClient = e[1]
        this.fileType = e[1]
      }
      let len = this.submitType
        ? this.fileServerConfig.client[this.fileType].length
        : this.fileIndex
      this.fileServerConfig.client[this.fileType].splice(
        len,
        this.submitType ? 0 : 1,
        e[0]
      )

      this.showDialog = false
      if (this.submitType) {
        this.updateConfig(this.LANG.ADD_SUCCESS)
      } else this.updateConfig(this.LANG.EDIT_SUCCESS)
    },
    initFileItem() {
      if (this.submitType) {
        this.addFileConfig.endpoint = ''
        this.addFileConfig.secretKey = ''
        this.addFileConfig.accessKey = ''
        this.addFileConfig.bucketName = ''
        // this.addFileConfig.ossType = ''
        delete this.addFileConfig.ossType
        // this.addFileConfig.state= true
      } else {
        this.addFileConfig = JSON.parse(
          JSON.stringify(
            this.fileServerConfig.client[this.fileType][this.fileIndex]
          )
        )
      }
    },
    close() {
      this.showDialog = false
    },
    clientChoose(tab, event) {
      this.fileServerClient = tab.name
    },
    //不选中加号的处理
    beforeLeave(activeName, oldActiveName) {
      if (activeName == 'addButton') {
        this.newFileType()
        return false
      }
      return true
    },
    //新增应用
    newFileType() {
      this.newFileState = true
      this.submitType = true
      this.initFileItem()
      this.showDialog = true
    },
    deleteType(type) {
      this.$confirm(this.LANG.CLIENT_DELETE, {
        title: this.LANG.TIPS,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true
      })
        .then(() => {
          let index = '' //获取删除前一个client
          for (var a in this.fileServerConfig.client) {
            if (a != type) index = a
            else break
          }
          delete this.fileServerConfig.client[type]
          this.fileServerConfig = JSON.parse(
            JSON.stringify(this.fileServerConfig)
          ) //触发vue更新
          this.clientId.push(type)
          this.fileServerClient = index
          this.updateConfig(this.LANG.DELETE_SUCCESS)
        })
        .catch(() => {})
    },
    //新增文件服务器
    addFileItem(type) {
      this.newFileState = false
      this.submitType = true
      this.fileType = type
      this.initFileItem()
      this.showDialog = true
      this.fileConfigAdd = true
    },
    fileOn(index) {
      this.$confirm(this.LANG.FILE_ON, {
        title: this.LANG.CONFIRM,
        type: 'warning',
        confirmButtonText: this.LANG.DETERMINE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-icon-check',
        cancelButtonClass: 'fks-icon-close'
      })
        .then(() => {
          this.fileServerConfig.client[this.fileServerClient][
            index
          ].state = true
          this.updateConfig(this.LANG.ENABLE_SUCCESS)
        })
        .catch(() => {})
    },
    fileOff(index) {
      this.$confirm(this.LANG.FILE_OFF, {
        title: this.LANG.CONFIRM,
        type: 'warning',
        confirmButtonText: this.LANG.DETERMINE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-icon-check',
        cancelButtonClass: 'fks-icon-close'
      })
        .then(() => {
          this.fileServerConfig.client[this.fileServerClient][
            index
          ].state = false
          this.updateConfig(this.LANG.OFF_SUCCESS)
        })
        .catch(() => {})
    },
    updateConfig(message) {
      let params = {
        mailServerConfig: this.initData.mailServerConfig,
        smsServerConfig: this.initData.smsServerConfig,
        fileServerConfig: this.fileServerConfig
      }
      setServerConfig(params)
        .then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: message
            })
          }
        })
        .catch()
    },
    editItem(index, type) {
      this.fileType = type
      this.fileIndex = index
      this.submitType = false
      this.initFileItem()
      this.newFileState = false
      this.showDialog = true
    },
    deleteItem(index, type) {
      this.$confirm(this.LANG.FILE_DELETE, {
        title: this.LANG.TIPS,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true
      })
        .then(() => {
          this.submitType = false
          this.fileServerConfig.client[type].splice(index, 1)
          this.updateConfig(this.LANG.DELETE_SUCCESS)
        })

        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.fileButton {
  float: right;
  margin-top: 1px;
  margin-bottom: 16px;
}
</style>